<template>
  <div class="dashboard-container">
    <div class="app-container">
      <Card style="margin: 0px">
        <Form :model="form" :rules="ruleInline">
          <Row>
            <Col>
              <FormItem prop="title">
                <Input v-model="form.title" style="width: 200px" placeholder="根据用户名搜索" />
              </FormItem>
            </Col>
            <Col>
              <FormItem style="margin-left: 20px">
                <Button style="margin-right: 20px" @click="eliminate">清除</Button>
                <Button type="primary" @click="search">搜索</Button>
              </FormItem>
            </Col>
            <Col style="margin-left: 20px">
              <Row type="flex" justify="end">
                <Col>
                  <Button type="success" icon="md-add" @click="add">新增权限列表</Button>
                </Col>
              </Row>
            </Col>
          </Row>
        </Form>
        <el-tag type="info" style="width: 100%; margin-bottom: 10px">
          <i class="el-icon-info"></i>
          总条数: {{ total }}
        </el-tag>
        <Table border :columns="columns" :data="data" ref="selection">
          <template
            slot-scope="{ row }"
            slot="create_date"
          >{{ row.create_date | time(row.create_date) }}</template>
          <template slot-scope="{ row }" slot="operation">
            <!-- 修改 -->
            <Button
              type="primary"
              icon="ios-create-outline"
              style="margin-right: 10px; font-size: 20px"
              ghost
              shape="circle"
              @click="detail(row)"
            ></Button>
            <!-- 删除 -->
            <Button
              icon="ios-trash-outline"
              style="font-size: 20px"
              @click="remove(row)"
              type="error"
              shape="circle"
              ghost
            ></Button>
          </template>
        </Table>
        <Modal v-model="isAdd" :title="title" @on-ok="confirm" :draggable="true">
          <!-- <Row type="flex" justify="center">
          <Col>-->
          <Form :model="formAdd" :rules="ruleInlineAdd" width="400px" style="margin-left: 100px">
            <FormItem prop="title" label="用户名">
              <Input v-model="formAdd.title" style="width: 200px" />
            </FormItem>
            <FormItem label="权限分配">
              <!-- <Input v-model="formAdd.name" style="width: 200px" /> -->
              <Tree
                :data="list"
                expand-node
                show-checkbox
                children-key="points"
                @on-check-change="checkChange"
                style="margin-left:70px"
              ></Tree>
            </FormItem>
          </Form>
          <!-- </Col>
          </Row>-->
        </Modal>
        <Row type="flex" justify="end" style="margin-top: 20px">
          <Page :total="data.counts" @on-change="change" />
        </Row>
      </Card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>

<script>
import { list, remove, add, update, detail } from '@/api/base/permissions.js'
import { list as listMeus } from '@/api/base/menus.js'
import moment from 'moment'
// import { tranListToTreeData } from './tree'
export default {
  // name: 'base-permissions',
  filters: {
    time (val) {
      return moment(val).format('YYYY-MM-DD')
    }
  },
  name: 'base-permissions',
  data () {
    return {
      title: '',
      page: 1, // 当前页数
      pagesize: 10, // 每页数量
      total: 0,
      isAdd: false,
      form: {
        title: '',
        page: 1,
        pagesize: 10
      },
      ruleInline: {
        title: []
      },
      formAdd: {
        title: ''
      },
      ruleInlineAdd: {
        title: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
      },
      //! 表头
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '用户名',
          key: 'title',
          align: 'center'
        },
        {
          title: '日期',
          key: 'create_date',
          align: 'center',
          slot: 'create_date'
        },
        {
          title: '操作',
          key: 'operation',
          align: 'center',
          slot: 'operation'
        }
      ],
      //! 表格数据
      data: [],
      row: {},
      // list: [{ title: '系统菜单和页面权限点', points: [], disabled: true }],
      list: [],
      arr: [],
      checked: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    //! 点击复选框
    checkChange (val) {
      console.log(val)
      this.arr = []
      // console.log(val)
      val.forEach((item) => {
        // console.log(item)
        this.arr.push(item.id)
        // ----------------------------------
        // if (item.checked === true) {
        //   this.checked = true
        //   console.log(111)
        // }
        // ----------------------------------
        // if (item.points) {
        //   item.points.forEach((i) => {
        // console.log(i)
        // this.arr.push(i.id)
        //   })
        // }
        console.log(this.arr)
        return this.arr
      })
      // console.log(this.arr)
    },
    //! 搜索
    async search () {
      const res = await list(this.form)
      // console.log(res)
      this.data = res.data.list
      // this.getList()
    },
    //! 清除
    eliminate () {
      this.getList()
      this.form = {
        title: ''
      }
    },
    //! 权限列表
    async getList () {
      const res = await list({ page: this.page, pagesize: this.pagesize })
      console.log(res)
      this.data = res.data.list
      this.total = res.data.counts
    },
    //! 删除
    async remove (row) {
      // try {
      //   await remove(row)
      //   this.$Message.success({
      //     content: '删除成功'
      //   })
      //   this.getList()
      // } catch (error) {
      //   console.log(error)
      // }
      // --------------------------------------------
      try {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            // console.log(obj.id) // 当前id
            remove(row).then(() => {
              // 重新渲染页面
              this.getList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      } catch (error) {
        console.log(error)
      }
    },
    //! 权限组添加
    async add () {
      this.title = '创建权限组'
      this.isAdd = true
      const res = await listMeus()
      const data = res.data
      let x = []
      // console.log(data)
      x = data.map(item => {
        // console.log(item)
        return { points: item.childs, code: item.code, id: item.id, pid: item.pid, title: item.title }
      })
      // console.log(x)
      // this.list[0].childs = res.data
      // this.list[0].points = x
      this.list = x
    },
    //! 分页器下一页
    async change (val) {
      this.page = val
      const res = await list({ page: this.page, pagesize: this.pagesize })
      this.data = res.data.list
    },
    //! 修改
    async detail (row) {
      this.title = '修改权限组'
      this.isAdd = true
      this.row = row
      // console.log(row)
      // 回写
      const a = { id: row.id }
      let qx = await detail(a)
      // console.log(qx)
      // console.log(qx.data.permissions)
      qx = qx.data.permissions
      console.log(qx)
      // -----------------
      const res = await listMeus()
      // console.log(res)
      const data = res.data
      // ----------------------------------
      // ----------------------------------
      let x = []
      // console.log(data)
      x = data.map(item => {
        // console.log(item)
        return { points: item.childs, code: item.code, id: item.id, pid: item.pid, title: item.title }
      })
      console.log(x)
      // ---------------
      // 递归
      const aaa = (list) => {
        list.forEach(item => {
          // console.log(item)
          if (qx.indexOf(item.id) !== -1) {
            item.checked = true
            item.selected = false
            // console.log('找到了')
          } else {
            item.checked = false
          }
          // console.log(item.points)
          if (item.points) {
            aaa(item.points)
          }
        })
      }
      aaa(x)
      this.list = x
      //! 递归硬写
      // x.forEach(item => {
      //   // console.log(item)
      //   if (qx.indexOf(item.id) !== -1) {
      //     item.checked = true
      //     item.selected = false
      //     // console.log('找到了')
      //   } else {
      //     item.checked = false
      //   }
      // console.log(item.points)
      //   if (item.points) {
      //     item.points.forEach(i => {
      // console.log(i)
      //       if (qx.indexOf(i.id) !== -1) {
      //         i.checked = true
      //         i.selected = false
      //         // console.log(item)
      //       } else {
      //         i.checked = false
      //       }
      //       if (i.points) {
      //         i.points.forEach(ii => {
      // console.log(ii)
      //           if (qx.indexOf(ii.id) !== -1) {
      //             ii.checked = true
      //             ii.selected = false
      // console.log(item)
      //           } else {
      //             ii.checked = false
      //           }
      //         })
      //       }
      //     })
      //   }
      // })
      // this.list = x
    },
    //! 增加,修改
    async confirm () {
      if (this.title === '创建权限组') {
        try {
          await add({ title: this.formAdd.title, permissions: this.arr })
          this.getList()
          this.$Message.success({
            content: '添加成功'
          })
          this.formAdd.title = ''
        } catch (error) {
          console.log(error)
        }
        // console.log('创建权限组')
      } else {
        // console.log('修改权限组')
        try {
          // console.log(this.row)
          await update({ id: this.row.id, title: this.formAdd.title, permissions: this.arr })
          this.getList()
          this.$Message.success({
            content: '修改成功'
          })
          this.formAdd.title = ''
        } catch (error) {
          console.log(error)
        }
      }
    }
  }
}
</script>
<style lang="">
</style>
